<template>
  <el-tooltip :open-delay="1000" class="item"
              effect="dark"
              placement="top"
              >
              <div slot="content">
                <div style="font-weight:700;margin-bottom:5px;font-size:14px">{{widgetName}}</div>
                <div v-if='gadgetSetting.headerDescription && gadgetSetting.headerDescription.trim().length>0'>{{gadgetSetting.headerDescription}}</div>
                <div v-if="gadgetSetting.wikiUrl&&gadgetSetting.wikiUrl.trim().length>0" style="margin-top:3px"><a :href="gadgetSetting.wikiUrl.trim()" target="_blank" style="color:#409eff">More Info</a></div>
              </div>
    <div class="cardTitle threepoints" style="cursor: pointer;display:flex;justify-content: space-between;"
          v-if='widgetName && widgetName.trim().length>0 && $route.path.includes("/publicReportPdf") && showGridMaxNum'>
      <span>{{ widgetName }}</span>
      <span v-if="$route.path.includes('/publicReportPdf')&&showGridMaxNum" style="font-weight:200">Result are limited to the first 350 rows of data</span>
    </div>
    <div class="cardTitle threepoints" style="cursor: pointer;" 
          v-else-if='widgetName && widgetName.trim().length>0'>
      <span>{{ widgetName }}</span>
    </div>
  </el-tooltip>
</template>

<script>

export default {
  name: 'GadgetTitle',

  props: {
    widgetName: {
      type: String
    },
    showGridMaxNum: {
      type: [Boolean],
      default: false
    },
    gadgetSetting: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {

    }
  },


  methods: {
  }
}
</script>
<style scoped>
.cardTitle {
  font-size: 16px;
  color: #000;
  font-weight: 700;
  display: inline-block;
  max-width: calc(100%);
  position: relative;
  top: 2px;
}
.threepoints {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
